import React, { PureComponent } from 'react';
import store from './store(拆分)';
import Home from './pages/Home';
import Profile from './pages/Profile';
import About from './pages/About';
import Category from './pages/Category';
import Rank from './pages/Rank';

class App extends PureComponent {
  
  constructor(props) {
    super(props);
    this.state = {
      counter: store.getState().counter.counter
    }
  }

  componentDidMount() {
    //订阅store
    store.subscribe(() => {
      const state = store.getState().counter;
      this.setState({
        counter: state.counter
      })
    })
  }

  render() { 

    const { counter } = this.state;

    return ( 
      <div>
        <h2>App Counter: {counter}</h2>
        <div className='pages'>
          <Home/>
          <Profile/>
          <About/>
          {/* 直接在组件中请求数据 */}
          {/* <Category/> */}
          {/* 使用redux-thunk, 统一在store中请求数据 */}
          <Rank/>
        </div>
      </div>
     );
  }
}
 
export default App;